<template>
	<div class="table">
		<!-- <div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-cascades"></i>用户管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div> -->
		<div class="container">
			<search-condition @clickSearchData="searchEvent">
				<div class="element">
					<p class="inline">时间</p>
					<div class="inline">
						<el-date-picker class="width160" type="date" placeholder="选择日期" v-model="searchForm.date" value-format="yyyy-MM-dd"></el-date-picker>
					</div>
				</div>
				<div class="element">
					<p class="inline">商家ID</p>
					<div class="inline">
						<el-select v-model="searchForm.merchantId" @change="idChange" class="handle-select mr10 width120">
							<el-option v-for="item in idOptions" :key="item.id" :label="item.value" :value="item.value"></el-option>
						</el-select>
					</div>
				</div>
				<div class="element">
					<p class="inline">状态</p>
					<div class="inline">
						<el-select v-model="searchForm.status" @change="statusChange" class="handle-select mr10 width120">
							<el-option v-for="item in statusOptions" :key="item.id" :label="item.value" :value="item.value"></el-option>
						</el-select>
					</div>
				</div>
				<div class="element">
					<p class="inline">条件查询</p>
					<div class="inline">
						<el-select v-model="searchForm.condition" @change="conditionChange" class="handle-select mr10">
							<el-option v-for="item in conditionOptions" :key="item.id" :label="item.value" :value="item.value"></el-option>
						</el-select>
					</div>
					<div class="inline width160">
						<el-input v-model="searchForm.searchContent" size="medium" placeholder="请输入搜索内容" clearable></el-input>
					</div>
				</div>
				<div class="element">
					<div class="inline">
						<!-- <el-checkbox v-model="checkedMineralDesc" @change="checkedMineralDescChange">按拥有矿石量降序</el-checkbox> -->
					</div>
				</div>
			</search-condition>
			<el-table :data="tableData" border stripe class="table" ref="multipleTable" style="width: 100%">
				<el-table-column prop="ID" label="商品ID" width="80"></el-table-column>
				<el-table-column prop="date" label="商家ID" width="150"></el-table-column>
				<el-table-column prop="date" label="商品名称" width="150"></el-table-column>
				<el-table-column prop="date" label="商品价格" width="150"></el-table-column>
				<el-table-column prop="date" label="数量" width="150"></el-table-column>
				<el-table-column prop="date" label="返贡献值" width="150"></el-table-column>
				<el-table-column prop="date" label="下单时间" width="150"></el-table-column>
				<el-table-column prop="date" label="发货时间" width="150"></el-table-column>
				<el-table-column prop="date" label="付款截图" width="150"></el-table-column>
				<el-table-column prop="date" label="快递单截图" width="150"></el-table-column>
				<el-table-column prop="date" label="买家ID" width="150"></el-table-column>
				<el-table-column prop="date" label="买家手机号" width="120"></el-table-column>
				<el-table-column prop="remark" label="备注" width="200" show-overflow-tooltip>
					<!-- <template slot-scope="props">
						<span class="ellipsis">{{ props.row.remark }}</span>
					</template> -->
				</el-table-column>
				<el-table-column prop="date" label="状态" width="120" fixed="right"></el-table-column>
				<el-table-column label="操作" width="90" align="center" fixed="right">
					<template slot-scope="scope">
						<el-link type="primary" @click="handleDetail(scope.$index, scope.row)">详情</el-link>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
				 :page-sizes="pageSizes" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
				</el-pagination>
			</div>
		</div>
<!-- <el-table-column prop="date" label="商家ID" width="150"></el-table-column>
				<el-table-column prop="date" label="商品名称" width="150"></el-table-column>
				<el-table-column prop="date" label="商品价格" width="150"></el-table-column>
				<el-table-column prop="date" label="数量" width="150"></el-table-column>
				<el-table-column prop="date" label="返贡献值" width="150"></el-table-column>
				<el-table-column prop="date" label="下单时间" width="150"></el-table-column>
				<el-table-column prop="date" label="发货时间" width="150"></el-table-column>
				<el-table-column prop="date" label="付款截图" width="150"></el-table-column>
				<el-table-column prop="date" label="快递单截图" width="150"></el-table-column>
				<el-table-column prop="date" label="买家ID" width="150"></el-table-column>
				<el-table-column prop="date" label="买家手机号" width="120"></el-table-column>
				<el-table-column prop="remark" label="备注" width="200" show-overflow-tooltip> -->
		<!-- 详情编辑弹出框 -->
		<el-dialog :title="visibleType=='detail'?'详情':'编辑'" :visible.sync="detailOrEditVisible" fullscreen>
			<el-form ref="form" :model="form" label-width="auto" :inline="true" :disabled="visibleType=='detail'?true:false">
				<el-form-item label="商家名字">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="商家手机号">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="商品名称">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="商品价格">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="数量">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="返贡献值">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="下单时间">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="发货时间">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="买家ID">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="买家手机号">
					<el-input v-model="form.address"></el-input>
				</el-form-item>
				<el-form-item label="备注">
					<el-input type="textarea" v-model="form.address" class="width400"></el-input>
				</el-form-item>
				<el-form-item label="付款截图">
					<div class="imageBox">
						<el-image class="item" :preview-src-list="imagesList" v-for="item in imagesList" :key="item" :src="item" fit="cover"
						 lazy></el-image>
					</div>
				</el-form-item>
				<el-form-item label="快递单截图">
					<div class="imageBox">
						<el-image class="item" :preview-src-list="imagesList" v-for="item in imagesList" :key="item" :src="item" fit="cover"
						 lazy></el-image>
					</div>
				</el-form-item>
				

			</el-form>
			<!-- <span slot="footer" class="dialog-footer center">
				<el-button type="default" icon="el-icon-edit" @click="cancelDealBtn">取消交易</el-button>
				<el-button type="primary" icon="el-icon-edit" @click="sellerSureBtn">帮卖方确认</el-button>
			</span> -->
		</el-dialog>

		<!-- 删除提示框 -->
		<el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
			<div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="delVisible = false">取 消</el-button>
				<el-button type="primary" @click="deleteRow">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import searchCondition from "@/components/common/searchCondition.vue";
	export default {
		data() {
			return {
				imagesList: [
					'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
					'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
				],
				images: [{
						id: '1',
						url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
					},
					{
						id: '2',
						url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
					},
					{
						id: '3',
						url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
					},
					{
						id: '4',
						url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
					},
				],
				url: '',
				tableData: [],
				total: 400,
				pageIndex: 1,
				pageSizes:'',
				pageSize:'',
				currentPage: 1,
				multipleSelection: [],
				searchForm: {
					merchantId:'',
					date:'',
					status: '',
					condition: '',
					searchContent: ''
				},
				status:"",
				merchantId:'',
				idOptions:[{
					id:0,
					value:1
				},{
					id:1,
					value:2
				},{
					id:2,
					value:3
				},{
					id:3,
					value:4
				},{
					id:4,
					value:5
				},{
					id:5,
					value:6
				}],
				statusOptions: [{
						id: "0",
						value: "已付款"
					},{
						id: "1",
						value: "待收获"
					},
					{
						id: "2",
						value: "已完成"
					},
				],
				conditionOptions: [{
						id: "0",
						value: "买家ID"
					},
					{
						id: "1",
						value: "买家手机号"
					}
				],
				select_cate: '',
				select_word: '',
				del_list: [],
				is_search: false,
				visibleType: 'detail',
				detailOrEditVisible: false,
				delVisible: false,
				form: {
					date: '',
					status:'',
					name: '',
					address: ''
				},
				adressWidth: '200px',
				idx: -1,
				checkedMineralDesc: false,
			}
		},
		components: {
			searchCondition
		},
		created() {
			console.log("created",this.$store.state.merchantId);
			this.initData();
			this.getData();
		},
		computed: {
			// data() {
			//     return this.tableData.filter((d) => {
			//         let is_del = false;
			//         for (let i = 0; i < this.del_list.length; i++) {
			//             if (d.name === this.del_list[i].name) {
			//                 is_del = true;
			//                 break;
			//             }
			//         }
			//         if (!is_del) {
			//             if (d.address.indexOf(this.select_cate) > -1 &&
			//                 (d.name.indexOf(this.select_word) > -1 ||
			//                     d.address.indexOf(this.select_word) > -1)
			//             ) {
			//                 return d;
			//             }
			//         }
			//     })
			// }
		},
		methods: {
			initData(){
				this.pageSizes = this.$config.pageSizes;
				this.pageSize = this.$config.pageSize;
				this.merchantId = this.$store.state.merchantId
				console.log('this.merchantId',this.$store.state.merchantId)
				this.searchForm.merchantId = this.$store.state.merchantId
			},
			checkedMineralDescChange() {
				console.log('checkedMineralDesc', this.checkedMineralDesc)
			},
			idChange(val){
				console.log('val', val)
			},
			statusChange(val) {
				console.log('val', val)
			},
			conditionChange(val) {
				console.log('val', val)
			},
			searchEvent() {
				this.pageIndex = 1;
				console.log('searchForm', this.searchForm)

				// this.getList();
			},
			sellerSureBtn(){
				this.$confirm('此操作将帮卖方确认, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '确认成功'
					});
					this.detailOrEditVisible = false;
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '我再考虑考虑'
					});
				});
			},
			cancelDealBtn() {
				this.$confirm('此操作将取消此单交易, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '取消成功'
					});
					this.detailOrEditVisible = false;
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '我再考虑考虑'
					});
				});
			},
			// 分页导航
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getData();
			},
			handleSizeChange(val) {
				console.log('size', val)
			},
			// 获取 easy-mock 的模拟数据
			getData() {
				// 开发环境使用 easy-mock 数据，正式环境使用 json 文件
				if (process.env.NODE_ENV === 'development') {
					this.url = '/ms/table/list';
				};
				// this.$axios.post(this.url, {
				//     page: this.cur_page
				// }).then((res) => {
				//     this.tableData = res.data.list;
				// })
				this.tableData = [{
					ID: 1,
					date: '2016-05-02',
					name: '王小虎',
					region: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1518 弄',
					zip: 200333
				}, {
					ID: 2,
					date: '2016-05-04',
					name: '王小虎',
					region: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1517 弄',
					zip: 200333
				}, {
					ID: 3,
					date: '2016-05-01',
					name: '王小虎',
					region: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1519 弄',
					zip: 200333
				}, {
					ID: 4,
					date: '2016-05-03',
					name: '王小虎',
					region: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1516 弄',
					zip: 200333
				}, {
					ID: 5,
					date: '2016-05-04',
					name: '王小虎',
					region: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1517 弄',
					zip: 200333
				}, {
					ID: 6,
					date: '2016-05-01',
					name: '王小虎',
					region: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1519 弄',
					zip: 200333
				}, {
					ID: 7,
					date: '2016-05-03',
					name: '王小虎',
					region: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1516 弄',
					zip: 200333
				}, {
					ID: 8,
					date: '2016-05-04',
					name: '王小虎',
					region: '上海',
					city: '普陀区',
					address: '上海市普陀区金沙江路 1517 弄',
					zip: 200333,
					remark: "上海市普陀区金沙江路 1517 弄上弄上弄上"
				}]
			},
			search() {
				this.is_search = true;
			},
			formatter(row, column) {
				return row.region;
			},
			filterTag(value, row) {
				return row.tag === value;
			},
			handleDetail(index, row) {
				this.visibleType = 'detail';
				this.idx = index;
				const item = this.tableData[index];
				this.form = {
					name: item.name,
					date: item.date,
					address: item.address
				}
				this.detailOrEditVisible = true;
			},
			handleEdit(index, row) {
				this.visibleType = 'edit';
				this.idx = index;
				const item = this.tableData[index];
				this.form = {
					name: item.name,
					date: item.date,
					address: item.address
				}
				this.detailOrEditVisible = true;
			},
			handleDelete(ID) {
				console.log('ID', ID);
				this.delVisible = true;
			},
			delAll() {
				const length = this.multipleSelection.length;
				let str = '';
				this.del_list = this.del_list.concat(this.multipleSelection);
				for (let i = 0; i < length; i++) {
					str += this.multipleSelection[i].name + ' ';
				}
				this.$message.error('删除了' + str);
				this.multipleSelection = [];
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			// 保存编辑
			saveEdit() {
				// this.$set(this.tableData, this.idx, this.form);
				this.detailOrEditVisible = false;
				this.$message.success(`修改 ${this.form.name} 信息成功`);
			},
			// 确定删除
			deleteRow() {
				this.tableData.splice(this.idx, 1);
				this.$message.success('删除成功');
				this.delVisible = false;
				this.detailOrEditVisible = false;
			}
		}
	}
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.del-dialog-cnt {
		font-size: 16px;
		text-align: center
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}
</style>
